<template>
  <div class="pointernoevent" style="height: 100%;">
    <!-- 二维元素 -->
    <!-- 背景组件 -->
    <!-- 动态行元素 -->
    <!-- 背景shadow -->
    <BackfroundDiv :backtype="setting.backgroundType" v-if="ifcontainerdiv">
      <div style="display: flex;flex-direction: column;height: 100%;">
        <!-- rows -->
        <div
          v-for="eachrow in setting.rows"
          :style="{flex: eachrow.flex,display: 'flex',flexDirection: eachrow.flexDirection, height: '100%'}"
        >
          <BackfroundDiv :backtype="eachrow.backgroundType">
            <div style="display: flex;flex-direction: row;height: 100%;width: 100%;">
              <!-- topblocks -->
              <div
                :class="['pointernoevent']"
                :style="{flex: eachtopblock.flex,display: 'flex',flexDirection: eachtopblock.flexDirection, height: '100%', ...eachtopblock.componentOptions.styleses}"
                v-for="eachtopblock in eachrow.topblocks"
              >
                <!-- 区块middleblock -->
                <!-- <BackfroundDiv
                  :backtype="eachtopblock.backgroundType"
                  :styleses="eachtopblock.componentOptions.styleses"
                  :classes="eachtopblock.componentOptions.classes"
                >-->
                <div
                  :style="{display: 'flex',flex: eachmiddleblock.flex,flexDirection: eachmiddleblock.flexDirection}"
                  v-for="eachmiddleblock in eachtopblock.middleblocks"
                >
                  <!-- 每个小区块block -->
                  <div
                    class
                    v-for="eachblock in eachmiddleblock.blocks"
                    :style="{flex: eachblock.flex}"
                  >
                    <!-- 边框组件 -->
                    <component
                      :is="eachblock.borderOptions.borderType"
                      v-if="eachblock.borderOptions.borderType"
                      :borderOptions="eachblock.borderOptions"
                    >
                      <!-- 数据展示组件 -->
                      <component
                        :is="eachblock.componentDetail.type"
                        :componentDetail="eachblock.componentDetail"
                        style="pointer-events: auto;"
                      ></component>
                    </component>
                  </div>
                </div>
                <!-- </BackfroundDiv> -->
              </div>
            </div>
          </BackfroundDiv>
        </div>
      </div>
    </BackfroundDiv>

    <!-- 底部按钮 -->
    <!-- <div class="routerbtn">
      <div
        v-for="item in btnlist"
        :class=" item.name == activename ? 'eachbtna' : 'eachbtn'"
        @click="btnclick(item)"
      >
        <icon-svg
          :icon-class="item.icon"
          :color="item.name == activename ? '#F0971F' : '#09B1E6'"
          width="30px"
          height="30px"
        ></icon-svg>
      </div>

      <timepick>
        <div class="eachbtna">
          <icon-svg icon-class="jinggai" :color="'#09B1E6'" width="30px" height="30px"></icon-svg>
        </div>
      </timepick>
    </div> -->

    <el-dialog title="修改json" :visible.sync="isshowdia" width="50%" @close="isshowdia = false">
      <el-input type="textarea" :rows="20" placeholder="请输入内容" v-model="setting"></el-input>
      <span slot="footer">
        <el-button @click="isshowdia = false">取 消</el-button>
        <el-button type="primary" @click="diaclick()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- api组件 -->
    <component :is="item" v-for="item in apilist"></component>
  </div>
</template>

<script>
import setting from "./linglong.json";

export default {
  name: "index",
  components: {},

  watch: {},

  computed: {
    apilist: function() {
      let apicoms_arr = Object.keys(this.comrefer);
      let apicoms = {};

      setting.rows.map(each_row => {
        each_row.topblocks.map(each_topblock => {
          each_topblock.middleblocks.map(each_middleblock => {
            each_middleblock.blocks.map(each_block => {
              each_block.componentDetail.type;
              if (apicoms_arr.indexOf(each_block.componentDetail.type) != -1) {
                this.comrefer[each_block.componentDetail.type].map(item => {
                  apicoms[item] = 1;
                });
              }
            });
          });
        });
      });

      return Object.keys(apicoms);
    },
    //获取显示隐藏数组
    // showhidearr(){
    //   return this.$store.state.daping.showhidearr;
    // },
    //获取显示隐藏数组
    // showhide(){
    //   // return function (params) {
    //   //   console.log(params);
    //   //   // if (showhidearr.indexOf(params) != -1) {
    //   //   //   return true
    //   //   // }else{
    //   //   // }
    //   //   // return showhidearr.indexOf(params) != -1
    //   //   return true
    //   // }
    //   return true
    // }
  },

  data() {
    return {
      comrefer: {
        tianshunum: ["APIBigScreen"],
        shishinum: ["APIqueryDbPipenet"],
        jihuanum: ["APIBigScreen"],
        gongrenum: ["APIBigScreen"],
        mianjinum: ["APIqueryDbPipenet"],

        datatablereyuan: [
          "APIqueryDbPipenet",
          "APIqueryDbHeatplant",
          "APIqueryDbSubstation"
        ],

        datatableguanwang: ["APIqueryDbPipenet"],
        chartringchartguanwang: ["APIqueryDbPipenet"],
        chartbarchartzhongyao: ["APIqueryDbMeasuredpoint"],
        
        chartpiechartgongre: ["APIqueryDbPipenet"],
        chartbarchartbushui: ["APIconnectorList", "APIqueryDbConnector"],
        
        chartlinechartquanwang: [
          "APIBigScreen",
          "APIqueryDbPipenetColSa_003qc"
        ],
        chartlinechartgonglv1: ["APImanageHeatPlant"],
        chartlinechartgonglv2: ["APImanageHeatPlant"]
      },

      isshowdia: false,
      btnlist: [
        { name: "aaa1", icon: "qiche" },
        { name: "aaa2", icon: "jinggai" },
        { name: "aaa3", icon: "jietouzuoyi" },
        { name: "aaa4", icon: "shebeizhuangtai" }
      ],
      activename: "",
      ifcontainerdiv: false,
      styleObject: {
        color: "red",
        fontSize: "13px"
      },

      leftdiva: {
        flex: 25
      },

      middlediva: {
        flex: 50
      },

      rightdiva: {
        flex: 25
      },

      leftjson: {},
      middlejson: {},
      rightjson: {},

      setting: {}

      // layout
    };
  },

  created() {
    this.$root.setting.scale = setting.scale;
    this.$root.setting.data = setting;
  },

  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      //动态渲染左中右
      //动态渲染左侧；获取左侧数据
      this.setting = setting;
      this.ifcontainerdiv = true;
    },

    diaclick() {
      this.isshowdia = false;
      this.$store.state.app.dataSetting = JSON.parse(this.setting);
      this.loadData();
    },

    btnclick(item) {
      this.activename = item.name;
      switch (item.name) {
        case "aaa4":
          this.$router.push("/");
          break;
        case "aaa1":
          this.isshowdia = true;
          break;
        case "aaa2":
          this.$store.state.app.dataSetting = setting;
          this.loadData();
          break;
        case "aaa3":
          this.$store.state.app.dataSetting = setting1;
          this.loadData();

          break;

        default:
          break;
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.routerbtn {
  position: absolute;
  margin: 0 auto;
  width: 400px;
  height: 50px;
  color: aqua;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  z-index: 9;
  justify-content: space-between;
  pointer-events: auto;
  .eachbtna {
    width: 41px;
    height: 41px;
    background: url();
    background-repeat: no-repeat;
    // text-align: center;
    display: flex;
    flex: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .eachbtn {
    width: 41px;
    height: 41px;
    background: url();
    background-repeat: no-repeat;
    // text-align: center;
    display: flex;
    flex: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    &:hover {
      width: 41px;
      height: 41px;
      background: url();
      background-repeat: no-repeat;
    }
  }
}

.wm {
  width: 50%;
  margin: 5px;
}

.pointernoevent {
  pointer-events: none;
}

.topblock {
}

.block {
}

.eachblock {
}

.commonstyle {
  background-color: #5553;
  color: red;
}
</style>
